/**
 * aqiData，存储用户输入的空气指数数据
 * 示例格式：
 * aqiData = {
 *    "北京": 90,
 *    "上海": 40
 * };
 */
var aqiData = {};
var cityName = document.getElementById("aqi-city-input");
var aqiValue = document.getElementById("aqi-value-input");
var addBtn = document.getElementById("add-btn");
/**
 * 从用户输入中获取数据，向aqiData中增加一条数据
 * 然后渲染aqi-list列表，增加新增的数据
 */
function addAqiData() {
    if(!String.prototype.trim) {
        String.prototype.trim = function () {
            return this.replace(/(^\s*)|(\s*$)/g, "");
        }
    }

    var name = cityName.value.trim();
    var value = aqiValue.value.trim();

    if(!name.match(/^[a-zA-Z\u4e00-\u9fa5]+$/)){
        alert("cityName只能为中英文字符");
        return;
    }

    if(!value.match(/^[\d]+$/)) {
        alert("aqiVlaue只能为整数值");
        return;
    }

    aqiData[name] = value;

}

/**
 * 渲染aqi-table表格
 */
function renderAqiList() {
    var str = "<tr> <td>城市</td><td>空气质量</td><td>操作</td> </tr>";
    for(var cityName in aqiData){
        str += "<tr><td>" + cityName + "</td><td>"+ aqiData[cityName] +"</td><td><button data-city="+ cityName + ">删除</button></td></tr>"
    }

    document.getElementById("aqi-table").innerHTML = str;
}

/**
 * 点击add-btn时的处理逻辑
 * 获取用户输入，更新数据，并进行页面呈现的更新
 */
function addBtnHandle() {
    addAqiData();
    renderAqiList();
}

/**
 * 点击各个删除按钮的时候的处理逻辑
 * 获取哪个城市数据被删，删除数据，更新表格显示
 */
function delBtnHandle(target) {
    // do sth.
    delete aqiData[target.dataset.city];

    renderAqiList();
}

var bindEvent = function(ele, event_name, func){
    if(window.attachEvent){
        ele.attachEvent(event_name, func);
    }else if(window.addEventListener) {
        event_name = event_name.replace(/^on/, "");
        ele.addEventListener(event_name, func);
    }
}

function init() {

    // 在这下面给add-btn绑定一个点击事件，点击时触发addBtnHandle函数
    bindEvent(addBtn, "onclick", addBtnHandle);

    // 想办法给aqi-table中的所有删除按钮绑定事件，触发delBtnHandle函数
    bindEvent(document.getElementById("aqi-table"), "onclick", function(event){
        console.log(event)
        var target = event.srcElement ? event.srcElement : event.target;
        if(target.innerHTML == "删除"){
            delBtnHandle(target);
        }
    })


}

init();
